//
// Copyright (c) Microsoft. All rights reserved.
// Licensed under the MIT license.
//
// Microsoft Bot Framework: http://botframework.com
//
// Bot Framework Emulator Github:
// https://github.com/Microsoft/BotFramwork-Emulator
//
// Copyright (c) Microsoft Corporation
// All rights reserved.
//
// MIT License:
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//

.emulator {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;

  & .vertical {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  & .header {
    flex-basis: 0;
    flex-grow: 0;
    flex-shrink: 1;

    .toolbar-icon {
      cursor: pointer;
      margin: 0;
      padding: 0;
      border: 1px solid transparent;
      height: 18px;
      background-color: transparent;
      white-space: nowrap;
      color: var(--toolbar-text-color);
      font-size: 11px;

      &:hover {
        background-color: transparent;
        border: var(--toolbar-button-hover-border);
      }

      &:active {
        color: var(--toolbar-text-active);
      }
        
      &::before {
        background-color: var(--toolbar-icon-color);
        content: '';
        display: inline-block;
        height: 15px;
        margin-right: 3px;
        position: relative;
        top: 3px;
        width: 15px;
        -webkit-mask-size: 15px;
      }
    }

    .restart-icon {
      margin-left: 20px;
      &::before { -webkit-mask: url(../../media/ic_refresh.svg); }
    }
    .save-icon {
      margin-left: 20px;
      &::before { -webkit-mask: url(../../media/ic_save.svg); }
    }

    .cancel-icon {
      margin-left: 20px;
      &::before { -webkit-mask: url(../../media/ic_cancel.svg); }
    }
  }

  & .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: 0;
    height: 100%;
  }
}

.presentation {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--dialog-bg);
  color: var(--input-label-color);

  & .chat-panel {
    position: absolute;
    top: 50%;
    height: 75%;
    max-height: 800px;
    width: 100%;
    transform: translateY(-50%);
  }

  & > .presentation-content {
    position: relative;
    height: 100%;
    padding: 64px 0;
    max-width: 400px;
    margin: 0 auto;
  }

  & > .close-presentation-icon {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 64px;
    height: 64px;
    background: no-repeat 50% 50% url('../../media/ic_close.svg');
    background-size: 32px;
    cursor: pointer;
  }

  & .presentation-playback-dock {
    display: none;
    position: absolute;
    bottom: 0;
    height: 64px;
    width: 400px;
  }
}
